<template>
  <div style="margin: 15px" class="pay">
    <el-card>
      <div slot="header">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 18px;
            padding-bottom: 4px;
          "
        >
          <img
            src="@/assets/img/zhichu.svg"
            style="width: 20px; height: 35px; margin-right: 5px"
          />
          收入明细</span
        >
        <div class="xhxBox"></div>
      </div>
      <!-- 查询表单 -->
      <div style="margin: 20px 0px 0px -10px">
        <el-form :inline="true" label-position="right" label-width="80px">
          <el-form-item label="入账时间">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 250px; margin-right: 30px"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
            
            >
            </el-date-picker>
            <!-- <el-date-picker
              v-model="dateRange"
              style="width: 200px; margin-right: 30px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              :picker-options="pickerOptions0"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
                @change="escButtonTime"
            >
            </el-date-picker> -->
          </el-form-item>
          <el-form-item label="展业时间" v-show="activeName != '2'">
            <!-- <el-date-picker
                    v-model="queryParams.proTime"
                    type="datetimerange"
                    align="right"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                     style="width: 200px; margin-right: 30px"
                    :default-time="['00:00:00', '23:59:59']"
                     value-format="yyyy-MM-dd HH:mm:ss"
                       :picker-options="pickerOptions0"
                  >
                  </el-date-picker> -->
            <el-date-picker
              v-model="queryParams.proTime"
              style="width: 250px; margin-right: 30px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="项目" v-show="activeName != '2'">
            <el-select
              v-model="queryParams.amountType"
              filterable
              clearable
              placeholder="默认全部"
              style="margin-right: 30px; width: 250px"
            >
              <!-- <el-option
                v-for="(item, index) in field101Options"
                :key="index"
                :label="item.proName"
                :value="item.proId"
              ></el-option> -->
              <el-option
                v-for="(item, index) in field101Options"
                :key="index"
                :label="item.proName"
                :value="item.proId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button
              icon="el-icon-refresh"
              style="background: #eeeeee; color: #6396f4; font-weight: bold"
              @click="resetQuery"
              >重置
            </el-button>
            <el-button type="primary" icon="el-icon-search" @click="getList(1)"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-divider></el-divider>
      <!-- 数据展示 -->
      <el-card style="height: 150px; margin-top: 10px">
        <div
          style="display: flex; height: 100%; justify-content: space-between"
        >
          <div class="pay-item">
            <div class="pay-value" style="color: red">
              <span>￥</span>
              {{ CardData.totalAmount || 0 }}
            </div>
            <div class="pay-label">总收入(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value">
              <span>￥</span>
              {{ CardData.comnissionAmount || 0 }}
            </div>
            <div class="pay-label">佣金收入(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value value-color">
              <span>￥</span>
              {{ CardData.profitAmount || 0 }}
            </div>
            <div class="pay-label">分润收入(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value value-color">
              <span>￥</span>
              {{ CardData.otherAmount || 0 }}
            </div>
            <div class="pay-label">其它收入(元)</div>
          </div>
        </div>
      </el-card>
      <el-divider></el-divider>

      <!-- 切换表头 -->
      <div class="headDbox">
        <div class="timeNameBox">
          <div
            :class="activeName == '0' ? 'hedaNameBox2' : 'hedaNameBox'"
            @click="handleClick1('0')"
          >
            <img
              v-show="activeName != '0'"
              src="@/assets/img/yongjin3.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
            <img
              v-show="activeName == '0'"
              src="@/assets/img/yongjin2.svg"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
              <span style="font-size: 18px;color:#666666" v-show="activeName != '0'">佣金明细</span>
            <span style="font-size: 18px;color:#0084FF" v-show="activeName == '0'">佣金明细</span>
                <!-- 选中下划线 -->
            <div :class="activeName == '0' ? 'xzxhx_box' : 'xzxhx_box2'"></div>
          </div>
          <div
            :class="activeName == '1' ? 'hedaNameBox2' : 'hedaNameBox'"
            @click="handleClick1('1')"
          >
            <img
              v-show="activeName != '1'"
              src="@/assets/img/fenrun2.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
            <img
              v-show="activeName == '1'"
              src="@/assets/img/fenrun1.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
             <span style="font-size: 18px;color:#666666" v-show="activeName != '1'">分润明细</span>
            <span style="font-size: 18px;color:#0084FF" v-show="activeName == '1'">分润明细</span>
                <!-- 选中下划线 -->
            <div :class="activeName == '1' ? 'xzxhx_box' : 'xzxhx_box2'"></div>
          </div>
          <div
            :class="activeName == '2' ? 'hedaNameBox2' : 'hedaNameBox'"
            @click="handleClick1('2')"
          >
            <img
              v-show="activeName != '2'"
              src="@/assets/img/other1.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
            <img
              v-show="activeName == '2'"
              src="@/assets/img/other.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
             <span style="font-size: 18px;color:#666666" v-show="activeName != '2'">其它明细</span>
            <span style="font-size: 18px;color:#0084FF" v-show="activeName == '2'">其它明细</span>
                <!-- 选中下划线 -->
            <div :class="activeName == '2' ? 'xzxhx_box' : 'xzxhx_box2'"></div>
          </div>
        </div>
        <div class="ExportButtonBox">
          <el-button
            icon="el-icon-upload2"
            @click="CommissionExport"
            style=" background: #f5f5f5"
            >导出</el-button
          >
        </div>
      </div>
      <!-- 佣金收入 -->
      <el-table
        :data="roleList"
        id="dataTable"
        v-show="activeName == '0'"
         :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
      >
        <el-table-column label="入账时间" align="center" prop="createTime" />
        <el-table-column label="展业时间" align="center" prop="workTime" />

        <el-table-column label="项目" align="center" prop="projectName" />
        <el-table-column label="结算类型" prop="settleName" align="center" />
        <el-table-column label="每单佣金/元" align="center" prop="price" />

        <el-table-column label="总数" prop="orderCount" align="center">
        </el-table-column>
        <!-- <el-table-column
                label="收入用户"
                prop="toNickName"
                align="center"
              /> -->
        <el-table-column label="总佣金/元" align="center" prop="amount">
          <template slot-scope="scope">
            <span style="color: red">{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分润收入 -->
      <el-table
        :data="roleList"
        id="dataTable"
        v-show="activeName == '1'"
         :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
      >
        <el-table-column label="入账时间" align="center" prop="createTime" />
        <el-table-column label="展业时间" align="center" prop="workTime" />

        <el-table-column label="项目" align="center" prop="projectName" />

        <!-- <el-table-column
                label="每单佣金/元"
                align="center"
                prop="price"
              /> -->
        <el-table-column label="结算类型" prop="settleName" align="center" />
        <!-- <el-table-column label="总数" prop="orderCount" align="center"/> -->
        <!-- <el-table-column
                label="收入用户"
                prop="toNickName"
                align="center"
              /> -->
        <el-table-column label="分润/元" align="center" prop="amount">
          <template slot-scope="scope">
            <span style="color: red">{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 其它收入 -->
      <el-table
        :data="roleList"
        id="dataTable"
        v-show="activeName == '2'"
         :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
      >
        <el-table-column label="入账时间" align="center" prop="createTime" />

        <!-- <el-table-column
                label="项目"
                align="center"
                prop="projectName"
              /> -->
        <el-table-column label="分润/元" align="center" prop="amount">
          <template slot-scope="scope">
            <span style="color: red">{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="notes" />
      </el-table>

      <pagination
        :total="total"
        style="margin: 10px 0px 50px 0px"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 公告弹窗 -->
    <Dialog
      ref="mychild"
      @AddAnnouncement="AddAnnouncement"
      :uelLocation="uelLocation"
    />
  </div>
</template>

<script>
import {
  capUserWalletRecordStatistics,
  selectCapUserWalletRecordList,
  getProNameList,
  userProjectList,
  capPoolAccountRecordStatistics,
  selectCapPoolAccountRecordListPage,
  selectTenantExcel,
} from "@/api/finance/index.js";
import { getIdentityAndTopId, getInfo } from "@/api/login.js";
import Dialog from "@/views/components/Dialog.vue";
export default {
  data() {
    return {
      //时间选择器的快捷选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
        ],
      },

      userId: "",
      uelLocation: "",
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      // 类型搜索
      field101Options: [
        // {
        //   proName: "平台增加",
        //   proId: 3,
        // },
        // {
        //   proName: "平台减少",
        //   proId: 2,
        // },
      ],
      // 切换佣金收入和分润收入
      activeName: "0",
      // 分页器
      pageNum: 1,
      pageSize: [10, 20, 50, 100],
      pageSizes: 10,
      total: 0,

      // ..卡片总数据
      CardData: {
        TotalRevenue: "", //总收入
        CommissionIncome: "", //佣金收入
        ProfitIncome: "", //利润收入
        AccountBalance: "", //账户余额
      },

      // 用户ID
      userId: 0,

      // 时间
      dateRange: [],
      // tab切换
      // activeName: "first",
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 分页总条数
      total: 0,
      // 收入表格数据
      noticeList: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 项目
        amountType: "",
        proTime: "", //展业时间
        // 时间
        // dateRange: "",
      },
      roleList: [],
      //租户Id
      TenantId: "",
    };
  },
  async mounted() {

    //获取是租户还是用户还是平台
    const { data } = await getIdentityAndTopId();
    const res = await getInfo();
    console.log(res, "用户信息");
    if (res.code == 200) {
      this.userId = res.user.userId;
    }
    this.TenantId = sessionStorage.getItem("TenantId") - 0; //租户ID
    //公告弹窗
    if (data.identity == "用户") {
      this.AddAnnouncement();
    }
    //调用获取当前时间的函数
    this.defaultDate()
    this.dateRange[0] =
      this.moment().format("YYYY") +
      "-" +
      this.moment().format("MM") +
      "-" +
      "01" +
      " " +
      "00:00:00";
    this.dateRange[1] = this.moment().format("YYYY-MM-DD") + " " + "23:59:59";
    this.getList();

    console.log(res, "1123123");
  },
  components: { Dialog },
  methods: {
    //进入页面获取当前月的第一天到当前日期
    defaultDate() {
				//获取新的时间
				let date = new Date()
				//获取当前时间的年份转为字符串
				let year = date.getFullYear().toString()
				//获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
				let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1)
					.toString()
				//获取天，判断是否小于10，如果是在字符串前面拼接'0'
				let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
				//字符串拼接，开始时间，结束时间
				let end = year + '-' + month + '-' + da //当天
				let beg = year + '-' + month + '-01' //当月第一天
				this.dateRange = [beg, end] //将值设置给插件绑定的数据
        // console.log(this.dateRange+"askndladsaldsla")
			},

    escButtonTime(value) {
      //  dateRange
      //      if (value == null) value = undefined;
      //  console.log(value);
    },
    //导出函数
    async CommissionExport() {
      let qh = "";
      let name = "";
      if (this.activeName == "0") {
        qh = "COMMISSION";
        name = "佣金收入";
      } else if (this.activeName == "1") {
        qh = "PROFIT";
        name = "分润收入";
      } else {
        qh = "OTHER";
        name = "其它收入";
      }

      if (!this.dateRange) {
        this.dateRange = [];
      }
      if (!this.queryParams.proTime) {
        this.queryParams.proTime = [];
      }
      let param = {};
      param = {
        startTime: this.dateRange[0], //创建时间
        endTime: this.dateRange[1],
        projectId: this.queryParams.amountType, //项目
        tenantId: this.TenantId, //租户ID
        // tenantId: 299, //租户ID
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        capitalType: qh, //OTHER其它   PROFIT分润  FEE是手续费  COMMISSION佣金
        toUserId: this.userId, //用户id
        // toUserId: 328, //用户id
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      };

      console.log(param, "666");
      const res = await selectTenantExcel(param);
      console.log(res, "文件流");
      if (!res) return; //
      const excelTitle = `${name}.xlsx`;
      //触发另一个函数
      this.readFileDownload(res, excelTitle);
    },
    //导出函数2
    readFileDownload(data, msg) {
      var res = data;
      if (
        res.type === "application/json" ||
        res.type === "application/json;charset=UTF-8"
      ) {
        // 失败的时候，注意ie兼容问题
        let fileReader = new FileReader();
        fileReader.onload = function (event) {
          let jsonData = JSON.parse(this.result); // this.result是根据event，读取文件后打印的
          console.log(jsonData, "...............");
          if (jsonData.data === null && jsonData.code === 1) {
            Message({
              message: jsonData.msg || "Error",
              type: "error",
              duration: 5 * 1000,
            });
          }
        };
        fileReader.readAsText(res);
      }
      if (
        res.type === "application/octet-stream" ||
        res.type === "application/vnd.ms-excel" ||
        res.type === "application/msexcel" ||
        res.type === "application/vnd.ms-excel;charset=UTF-8"
      ) {
        console.log("success..."); // 成功，注意ie兼容问题

        const blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
          // type: "application/msexcel;charset=utf-8",
        });

        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, msg);
        } else {
          console.log(blob);
          const url = window.URL.createObjectURL(blob);
          console.log(url);
          const aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", msg);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink);
          window.URL.revokeObjectURL(url);
        }
      }
    },
    //公告弹窗
    AddAnnouncement() {
      //传递子组件当前的路由；然后调用子组件的事件函数
      this.uelLocation = window.location.pathname.slice(1);
      this.$refs.mychild.gitData();
    },
    handleClick1(tab, event) {
      this.activeName = tab;
      console.log(tab, event);
      this.getList();
    },
    /** 查询角色列表 */
    async getList(row) {
      let qh = "";
      if (this.activeName == "0") {
        qh = "COMMISSION";
      } else if (this.activeName == "1") {
        qh = "PROFIT";
      } else {
        qh = "OTHER";
      }
      if (!this.dateRange) {
        this.dateRange = [];
      }
      if (!this.queryParams.proTime) {
        this.queryParams.proTime = [];
      }

      let param = {};

      param = {
        startTime: this.dateRange[0], //创建时间
        endTime: this.dateRange[1],
        projectId: this.queryParams.amountType, //项目
        tenantId: this.TenantId, //租户ID
        // tenantId: 299, //租户ID
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        capitalType: qh, //OTHER其它   PROFIT分润  FEE是手续费  COMMISSION佣金
        toUserId: this.userId, //用户id
        // toUserId: 328, //用户id
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      };

      const data = await selectCapPoolAccountRecordListPage(param);

      if (data.code == 200) {
        this.total = data.data.total;
        this.roleList = data.data.list;
        // this.roleList = data.data.list.map((item) => {
        //   if (item.otherType == "3") {
        //     item.otherType = "平台增加";
        //   } else if (item.otherType == "4") {
        //     item.otherType = "平台减少";
        //   }
        //   return item;
        // });
      } else {
        this.$message.error(data.msg);
      }

      let param2 = {
        startTime: this.dateRange[0], //创建时间
        endTime: this.dateRange[1],
        projectId: this.queryParams.amountType, //项目
        tenantId: this.TenantId, //租户ID
        // tenantId: 299, //租户ID
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        toUserId: this.userId, //用户id
        // toUserId: 328, //用户id
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      };

      const card = await capPoolAccountRecordStatistics(param2);
      if (card.code == 200) {
        this.CardData = card.data;
      } else {
        this.$message.error(card.msg);
      }

      console.log(card, "卡片");

      // 获取搜索下拉框
      // const search = await getProNameList();
      const search = await userProjectList();

      if (search.code == 200) {
        this.field101Options = search.data;
      }

      console.log(search, "搜索下拉框");
        if(row){
         this.$message({
          message: '搜索中...',
          type: 'success'
        });
      }

      // const param2 = {
      //   beginDate: this.dateRange[0], //创建时间
      //   endDate: this.dateRange[1],
      //   proName: this.queryParams.amountType, //搜索类型

      //   toUserId: this.userId, //用户ID   用户是toUserId   租户是fromUserId
      //   // fromUserId: this.userId, //用户ID   用户是toUserId   租户是fromUserId
      //   pageSize: this.queryParams.pageSize,
      //   pageNum: this.queryParams.pageNum,
      //   // proId: this.activeName - 0,  //佣金  分润 其他

      //   amountType: this.activeName - 0, //佣金  分润 其他
      // };

      // const data = await selectCapUserWalletRecordList(param2);//原来租户和用户列表是2个接口，现在全部换成租户的接口
      //  const data = await selectCapPoolAccountRecordListPage(param2);

      // console.log(param, "给后端传递的数据");
      // console.log(data, "数据222222");
      // if (data.code == 200) {
      //   this.roleList = data.data.list;

      //   this.total = data.data.total;
      //   this.loading = false;
      // }
      // console.log(this.roleList, "696969");
    },

    // ..分页器
    handleCurrentChange(value) {
      console.log(value, "1");
    },
    handleSizeChange(value) {
      console.log(value, "2");
      this.pageSizes = value;
      console.log(this.pageSizes, "2");
    },

    postSelectCapWithdrawalRecordListFun() {
      let objData = { ...this.queryParams };
      objData.userId = this.userId;
      // postSelectCapWithdrawalRecordList(objData).then((data) => {
      //   this.noticeList = data;
      //   this.loading = false;
      // });
    },

    handleClick(tab, event) {
      // console.log(tab, event, "4444");
      // console.log(tab.index, "4444");
      // console.log(this.userId, "33333333333");
      // ..查询提现记录
      // getSelectCapWithdrawalRecordById(this.userId).then((res) => {
      //   console.log(res, "结果");
      // });
      // ..提现记录列表
      if (tab.index == "3") {
        getselectByPageNumSize({
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        }).then((res) => {
          res.data.list.map((item) => {
            item.withdrawalType = "余额提现";
          });
          this.noticeList = res.data.list;
          // console.log(res.data.list, "结果");
        });
      } else if (tab.index == "1") {
        //点击分润收入
        const data = {
          capUserWalletRecord: {
            amountType: "0",
          },
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        };
        // 获取分润收入列表
        selectCapUserWalletRecordListFy(data).then((res) => {
          if (res.code == 200) {
            this.noticeList = res.data.list;
          }
          console.log(res, "分润收入");
        });
      } else if (tab.index == "0") {
        //点击佣金收入
        this.Commission();
      }

      this.postSelectCapWithdrawalRecordListFun();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.amountType = "";
      this.dateRange = [];
      this.queryParams.proTime = [];
      this.dateRange[0] =
        this.moment().format("YYYY") +
        "-" +
        this.moment().format("MM") +
        "-" +
        "01" +
        " " +
        "00:00:00";
      this.dateRange[1] = this.moment().format("YYYY-MM-DD") + " " + "23:59:59";
      this.getList(1);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.dateRange, "日期");
      // 卡片数据
      const data = {
        createTime: this.dateRange[0],
        updateTime: this.dateRange[1],
        userId: this.userId,
      };
      selectCapUserWalletRecordListNum(data).then((res) => {
        console.log(res, "搜索卡片总数数据");
        if (res.code == 200) {
          this.CardData.TotalRevenue = res.data.zongjiesuan;
          this.CardData.CommissionIncome = res.data.yongjinjiesuan;
          this.CardData.ProfitIncome = res.data.fenchengjiesuan;
          this.CardData.AccountBalance = res.data.yue;
        } else {
          this.$message.error("获取数据失败!");
        }
      });

      this.Commission();
      this.postSelectCapWithdrawalRecordListFun();
    },
  },
};
</script>

<style scoped lang="scss">
.headDbox{
  //  border: 1px red solid;
  display: flex;
justify-content:space-between;
  .timeNameBox {
  display: flex;
    .xzxhx_box{
     border-bottom: 2px rgb(0, 132, 255) solid;
     height: 5px;
     width: 80%;
     margin: 0 auto;
     padding-bottom: 10px;
  }
  .xzxhx_box2{
     border-bottom: 2px rgba(0, 132, 255,0) solid;
     height: 5px;
     width: 80%;
     margin: 0 auto;
     padding-bottom: 10px;
  }
  .hedaNameBox {
    // border: 1px red solid;
    margin-right: 40px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .hedaNameBox2 {
    // border-bottom: 2px rgb(0, 132, 255) solid;
    // padding-bottom: 10px;
    margin-right: 40px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  
}
.ExportButtonBox{
    //  border: 1px red solid;
    // padding-bottom: 20px;
    // margin-bottom: 20px;
  }
}

::v-deep .el-tabs__nav-scroll {
  border: 1px red solid;
  width: 90%;
  display: flex;
}
::v-deep .el-tabs__nav {
  // border: 1px red solid;
  width: 90%;
}
// ::v-deep .el-tabs__active-bar {
//   background: none;
// }

.xhxBox {
  height: 5px;
  border-top: 1px #eee solid;
  margin: 8px 0px 20px 0px;
}
.exportButton {
  border-top: 1px #eee solid;
  display: flex;
  justify-content: flex-end;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
<style>
.pay .el-date-editor .el-range-separator {
  width: 15%;
}
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}
.pay .el-card__body {
  height: 100%;
}

.pay .pay-item {
  width: 24%;
  /* border: 1px red solid; */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay .pay-item:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.pay .pay-item .pay-value {
  font-size: 24px;
  font-weight: bold;
}

.pay .pay-item .pay-value span {
  font-size: 10px;
  margin-right: -5px;
}

.pay .pay-item .value-color {
  color: #3a77f6;
}

.pay .pay-item .pay-label {
  font-size: 11px;
  margin-top: 10px;
}

.pay .el-divider--horizontal {
  background: #f0f0f0;
}

.pay .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
  border: none;
}

.pay .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
